<template>
  <div class="hot">
    <div v-if="playList" class="bg">
      <div class="bang">
         <div class="qing"></div>
         <p class="time">更新时间:{{playList.trackUpdateTime|formatime}}</p>
      </div>
    </div>
    <Songlist :song='showlist' :showNum='showNumber' @play="$emit('play',$event)"></Songlist>
    <Loading v-if="showLoading"></Loading>
    <p class="loadermore" @click = 'loadermore'>加载更多</p>
  </div>
</template>
<script>
import Songlist from '../components/SongLIst'
import Loading from '../components/Loading'

export default {
  name:"Hot",
  data(){
    return{
      hotlist:[],
      showlist:[],
      playList:null,
      showNumber:true,
      limit:20,
      showLoading:"true"
    }
  },
  components:{
    Songlist,
    Loading
  },
  created(){
    // /
    this.axios.get('/playlist/detail?id=3778678').then(da=>{
      // console.log(da);
      this.playList = da.data.playlist;
      // 需要处理成 跟 最新音乐一致的格式
      this.hotlist = da.data.playlist.tracks.map((d,index)=>{
        // 把返回的 tracks里面的数据 ar 转为 输出里面的数据
        let data = d;
            data.song={
              artists:d.ar, 
              privilege:{
                playMaxbr:da.data.privileges[index].playMaxbr
              }
            }
        // console.log(data);
        return data
      });
      this.showlist = this.hotlist.slice(0,this.limit)
      this.showLoading = false
    })
  },
  methods:{
    loadermore(){
      this.showLoading = true
      let num = this.showlist.length + this.limit;
      this.showlist = this.hotlist.slice(0,num)
      this.showLoading = false
    }
  },
  filters:{
    formatime(val){
      let d = new Date(val)
      return (d.getMonth()+1)+'月'+(d.getDay())+'日'
    }
  }
}
</script>
<style lang="less" scoped>
.hot{
  .bg{
    position: relative;
    padding-top: 38.9%;
    overflow: hidden;
    background: url('../assets/chengse_beijing.jpg') no-repeat;
    background-size: 100%;
    // background-size: contain;
    .bang{
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
    .qing{
      background: url('../assets/index_icon_2x.png') no-repeat -57px -60px;
      width: 142px;
      height: 67px;
      background-size: 166px 97px;
      background-position: -24px -30px;
    }
    .time{
      font-size: 12px;
      margin-top: 10px;
      color: #fff;
    }
  }
}
.loadermore{
    text-align: center;
    width: 90%;
    line-height: 40px;
    margin: 0 auto;
    color: #dd001b;
    border: 1px solid #dd001b;
    border-radius: 20px;
    cursor: pointer;
}
</style>